<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

    <title>boost 搜索引擎</title>
    <style>
        /* 全局样式重置 - 参照Bing */
        html, body, h1, h2, h3, h4, h5, h6, p, img, ol, ul, li, form, table, tr, th, td {
            border: 0;
            border-collapse: collapse;
            border-spacing: 0;
            list-style: none;
            margin: 0;
            padding: 0;
        }

        /* 页面基础样式 */
        body {
            font: 14px/normal Arial, Helvetica, Sans-Serif;
            color: #71777d;
            background-color: #f2f2f2;
        }

        /* 主容器 */
        .container {
            /* 设置div的宽度 */
            width: 800px;
            /* 通过设置外边距达到居中对齐的目的 */
            margin: 0px auto;
            /* 设置外边距的上边距，保持元素和网页的上部距离 */
            margin-top: 15px;
        }

        /* 搜索框区域 */
        .container .search {
            /* 宽度与父标签保持一致 */
            width: 100%;
            /* 高度设置为52px */
            height: 52px;
        }

        /* 搜索输入框 */
        .container .search input {
            /* 设置left浮动 */
            float: left;
            width: 600px;
            height: 50px;
            /* 设置边框属性：边框的宽度，样式，颜色 */
            border: 1px solid black;
            /* 去掉input输入框的有边框 */
            border-right: none;
            /* 设置内边距，默认文字不要和左侧边框紧挨着 */
            padding-left: 10px;
            /* 设置input内部的字体的颜色和样式 */
            color: #333;
            font-size: 16px;
            /* 设置圆角 */
            border-radius: 25px 0 0 25px;
        }

        /* 搜索按钮 */
        .container .search button {
            /* 设置left浮动 */
            float: left;
            width: 150px;
            height: 54px;
            /* 设置button的背景颜色为白色 */
            background-color: #FFFFFF;
            /* 设置button中的字体颜色 */
            color: #888888;
            /* 设置字体的大小，增大放大镜图标 */
            font-size: 28px;
            font-family:Georgia, 'Times New Roman', Times, serif;
            /* 设置圆角 */
            border-radius: 0 25px 25px 0;
            /* 设置边框为与输入框相同的黑色 */
            border: 1px solid black;
            border-left: none;
            cursor: pointer;
        }

        /* 搜索结果容器 */
        #b_results {
            width: 100%;
            background-color: #fff;
            margin-top: 20px;
            border-radius: 8px;
            overflow: hidden;
            list-style-position: inside;
        }

        /* 搜索结果列表项 - 参照Bing样式 */
        #b_results>li {
            background-color: #fff;
            margin: 0 0 4px;
            padding: 10px 20px;
        }

        /* 搜索结果内容 - 参照Bing的b_algo样式 */
        .b_algo {
            position: relative;
            padding: 12px 20px 0;
        }

        /* 结果标题链接 */
        .b_algo a {
            /* 设置为块级元素，单独站一行 */
            display: block;
            /* a标签的下划线去掉 */
            text-decoration: none;
            /* 设置a标签中的文字的字体大小 */
            font-size: 18px;
            /* 设置字体的颜色 - Bing的蓝色 */
            color: #1a0dab;
            line-height: 1.3;
            margin-bottom: 2px;
        }

        /* 鼠标悬停时的标题链接 */
        .b_algo a:hover {
            text-decoration: underline;
        }

        /* URL链接 */
        .b_algo .b_attribution {
            /* 设置为块级元素，单独站一行 */
            display: block;
            color: #006621;
            font-size: 14px;
            font-family: arial, sans-serif;
            margin-bottom: 4px;
        }

        /* 摘要文本 */
        .b_algo p {
            margin-top: 2px;
            margin-bottom: 0;
            font-size: 14px;
            color: #545454;
            line-height: 1.58;
            font-family: arial, sans-serif;
        }
        
        /* 分页控件样式 */
        .pagination {
            width: 100%;
            text-align: center;
            padding: 20px 0;
            margin-top: 10px;
            background-color: #fff;
            border-radius: 8px;
        }
        
        .pagination button {
            display: inline-block;
            padding: 6px 12px;
            margin: 0 5px;
            border: 1px solid #ddd;
            background-color: #fff;
            color: #333;
            cursor: pointer;
            border-radius: 4px;
        }
        
        .pagination button:hover {
            background-color: #f8f8f8;
            border-color: #c6c6c6;
        }
        
        .pagination button.active {
            background-color: #4285f4;
            color: white;
            border-color: #4285f4;
        }
        
        .pagination button:disabled {
            background-color: #f8f8f8;
            color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="search">
            <input type="text" placeholder="请输入搜索关键字" id="searchInput">
            <button id="searchButton">🔍</button>
        </div>
        
        <!-- 搜索结果区域 - 改为ol列表结构 -->
        <ol id="b_results">
            <!-- 搜索结果将通过JavaScript动态生成 -->
        </ol>
        
        <!-- 分页控件容器 -->
        <div id="pagination" class="pagination" style="display: none;"></div>
    </div>
    <script>
        // 全局变量存储搜索结果数据
        let allResults = [];
        const ITEMS_PER_PAGE = 10; // 每页显示的记录数
        let currentPage = 1;
        
        // 解析URL参数的函数
        function getUrlParameter(name) {
            name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
            let regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
            let results = regex.exec(location.search);
            return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
        }
        
        function Search() {
            // 1. 提取数据
            let query = $("#searchInput").val();
            console.log("query = " + query);
            
            if (!query || !query.trim()) {
                alert("请输入搜索关键字");
                return;
            }

            // 2. 发起http请求
            $.ajax({
                type: "GET",
                url: "/s?word=" + query,
                success: function(data) {
                    console.log(data);
                    // 存储所有结果
                    allResults = data;
                    currentPage = 1;
                    // 构建当前页的HTML
                    buildPageResults();
                    // 生成分页控件
                    generatePagination();
                },
                error: function(xhr, status, error) {
                    console.error("请求失败: " + status + ", 错误: " + error);
                    $("#b_results").empty().append("<li style='padding: 20px; text-align: center; color: #777;'>请求失败，请稍后重试</li>");
                    $("#pagination").hide();
                }
            });
        }
        
        // 构建当前页的搜索结果
        function buildPageResults() {
            // 获取html中的结果列表容器
            let resultsContainer = $("#b_results");
            // 清空历史搜索结果
            resultsContainer.empty();

            // 检查数据是否存在
            if (!allResults || allResults.length === 0) {
                resultsContainer.append("<li style='padding: 20px; text-align: center; color: #777;'>未找到相关结果</li>");
                $("#pagination").hide();
                return;
            }

            // 计算当前页的起始和结束索引
            const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
            const endIndex = Math.min(startIndex + ITEMS_PER_PAGE, allResults.length);
            
            // 获取当前页的数据
            const currentPageResults = allResults.slice(startIndex, endIndex);

            // 遍历数据，生成搜索结果项
            for (let elem of currentPageResults) {
                // 创建标题链接
                let a_lable = $("<a>", {
                    text: elem.title,
                    href: elem.url,
                    target: "_blank"
                });
                
                // 创建摘要段落
                let p_lable = $("<p>", {
                    text: elem.desc || ""
                });
                
                // 创建URL显示
                let span_lable = $("<span>", {
                    text: elem.url,
                    class: "b_attribution"
                });
                
                // 创建结果列表项
                let li_lable = $("<li>", {
                    class: "b_algo"
                });
                
                // 组装各个元素
                a_lable.appendTo(li_lable);
                p_lable.appendTo(li_lable);
                span_lable.appendTo(li_lable);
                
                // 添加到结果容器
                li_lable.appendTo(resultsContainer);
            }
        }
        
        // 生成分页控件
        function generatePagination() {
            const paginationContainer = $("#pagination");
            paginationContainer.empty();
            
            // 计算总页数
            const totalPages = Math.ceil(allResults.length / ITEMS_PER_PAGE);
            
            if (totalPages <= 1) {
                paginationContainer.hide();
                return;
            }
            
            paginationContainer.show();
            
            // 添加首页按钮
            const firstBtn = $("<button>", {
                text: "首页",
                click: function() { goToPage(1); }
            });
            firstBtn.prop("disabled", currentPage === 1);
            firstBtn.appendTo(paginationContainer);
            
            // 添加上一页按钮
            const prevBtn = $("<button>", {
                text: "上一页",
                click: function() { goToPage(currentPage - 1); }
            });
            prevBtn.prop("disabled", currentPage === 1);
            prevBtn.appendTo(paginationContainer);
            
            // 计算页码显示范围
            let startPage = Math.max(1, currentPage - 2);
            let endPage = Math.min(totalPages, startPage + 4);
            
            if (endPage - startPage < 4) {
                startPage = Math.max(1, endPage - 4);
            }
            
            // 添加页码按钮
            for (let i = startPage; i <= endPage; i++) {
                const pageBtn = $("<button>", {
                    text: i,
                    click: function() { goToPage(i); }
                });
                if (i === currentPage) {
                    pageBtn.addClass("active");
                }
                pageBtn.appendTo(paginationContainer);
            }
            
            // 添加下一页按钮
            const nextBtn = $("<button>", {
                text: "下一页",
                click: function() { goToPage(currentPage + 1); }
            });
            nextBtn.prop("disabled", currentPage === totalPages);
            nextBtn.appendTo(paginationContainer);
            
            // 添加尾页按钮
            const lastBtn = $("<button>", {
                text: "尾页",
                click: function() { goToPage(totalPages); }
            });
            lastBtn.prop("disabled", currentPage === totalPages);
            lastBtn.appendTo(paginationContainer);
        }
        
        // 跳转到指定页码
        function goToPage(pageNum) {
            currentPage = pageNum;
            buildPageResults();
            generatePagination();
            
            // 滚动到搜索结果顶部
            $("#b_results").scrollIntoView({ behavior: "smooth", block: "start" });
        }

        // 添加输入框焦点效果
        $("input").focus(function() {
            if ($(this).val() === "请输入搜索关键字") {
                $(this).val("");
            }
        });
        
        // 添加回车搜索功能
        $("#searchInput").keypress(function(e) {
            if (e.which === 13) { // 回车键的键码是13
                e.preventDefault(); // 阻止表单默认提交行为
                Search();
            }
        });
        
        // 为搜索按钮添加点击事件
        $("#searchButton").on("click", Search);
        
        // 页面加载时检查URL参数
        $(document).ready(function() {
            // 检查URL中是否有名为"word"的参数
            let searchWord = getUrlParameter("word");
            if (searchWord) {
                // 如果有，将参数值填入搜索框
                $("#searchInput").val(searchWord);
                // 自动执行搜索
                Search();
            }
        });
    </script>
</body>
</html>